資產負債表

表格元素 <table>

HTML自帶製作表格或報表專用的標籤，這裡簡單介紹table中標籤代表的意思：

<table>
    <caption>                  <!-- caption：表格的標題 -->
        List
    </caption>
    <thead>                    <!-- thead：  表格的首行 -->
        <tr>                   <!-- tr：     表格的行 -->
            <th>item</th>      <!-- th：     表頭單元格 -->
            <th>amount</th>
        </tr>
    </thead>
    <tbody>                    <!-- tbody：  除了首行外的其餘內容 -->
        <tr>
            <td>iPhone 14</td> <!-- td：     單元格 -->
            <td>NT$27,900</td>
        </tr>
        <tr>
            <td>iPhone 14 pro</td>
            <td>NT$34,900</td>
        </tr>
    </tbody>
</table>

這次的任務在結構上就需要花點心思，來了解表單的布局。

偽類 ( Pseudo-classes；虛擬類別 )

爺爺年輕的時候帶著爸爸一家人做著裁縫西裝的生意，手工西裝店在那個年代可是每個老闆級商務人士必備，可以想像爺爺當年肯定是個英俊挺拔的模樣，穿上名牌標籤西裝做為模特兒招攬生意。客廳的縫紉機說的似乎是這樣的故事，可惜現實並不美好，虛構的故事往往只有在特定的場合起作用，眼前的爺爺穿著的，只有死神氈上的標籤。

在養分篇粗略的介紹到CSS選擇器(Selectors)的概念，這裡介紹一些其他的用法，當我們用選擇器選取到的元素加上虛擬類別的關鍵字時，就代表他們會在特殊的情況才會觸發，常用一個冒號"："來作為關鍵字，關鍵字，例如：

tr.total:hover {
  background-color: #99c9ff;
}
/* ：hover就是一個虛擬類別，代表滑鼠經過這個tr之中class="total"的元素區塊時才會套用的樣式。  */

這在網頁上出現超連結時特別實用，而最早在點餐篇這個任務就有使用。
除此之外，還有：

• :active
  正在互動的元素，像是滑鼠正在按下或鬆開的瞬間。

• :focus
  當元素聚焦時，例如表單輸入時，或通過鍵盤上的tab鍵來觸發。

• :visited
  存在瀏覽紀錄的元素。

下一篇：偽裝(下)再來介紹這個任務中會使用的其他選擇器。

引用與資源：
freecodecamp
mdn_web_docs_Pseudo-classes
我的資產負債表